<template>
		<el-container>
		  <el-header>
			  <div>
				<img src="../assets/img/logo2.png">
				<span>电商后台管理系统</span>
			  </div>
			  <el-button type="info">退出</el-button>
		  </el-header>
		  <el-container>
		    <el-aside :width="isCollapse?'64px':'200px'">
				<div class="toggle-button" @click="toggleCollapse">|||</div>
				<el-menu
				      :default-active="activepath"
				      class="el-menu-vertical-demo"
				      background-color="#545c64"
				      text-color="#fff"
				      active-text-color="#ffd04b"
					  router
					  :collapse="isCollapse">
				      <el-submenu 
					  v-for="item in menulist"
					  :key="item.id"
					  :index="item.id+''">
				        <template slot="title">
				          <i class="el-icon-location"></i>
				          <span>{{item.authName}}</span>
				        </template>
				          <el-menu-item 
						  v-for="it in item.children"
						  :key="it.id"
						  :index="'/'+it.path"
						   @click="saveBread(it.authName,item.authName)">
							  <i class="el-icon-menu"></i>
							  <span>{{it.authName}}</span>
						  </el-menu-item>
				        </el-submenu>
				    </el-menu>
			</el-aside>
		    <el-main>
				<router-view></router-view>
			</el-main>
		  </el-container>
		</el-container>
</template>

<script>
export default {
    data(){
        return {
            menulist:[],
            isCollapse:false,
            activepath:'/users'
        }
    },
    created(){
        this.$axios.get('menus')
        .then(res=>{
            this.menulist=res.data
        })

       this.activepath=this.$route.path
    },
    methods:{
        toggleCollapse(){
            this.isCollapse=!this.isCollapse
        },
        saveBread(oneName,twoName){
          var oName={oneName:oneName,twoName:twoName}
          sessionStorage.setItem('breadName',JSON.stringify(oName))
        }
    }
};
</script>

<style lang="scss">
	.el-container {
	  height: 100%;
	}
	.el-header {
		background-color: #333;
		display: flex;
		justify-content: space-between;
		padding-left: 0;
		align-items: center;
		color: #fff;
		font-size: 20px;
		> div {
		display: flex;
		align-items: center;
		> span {
		  margin-left: 15px;
		}
	  }
	}
	  .toggle-button{
	      font-size: 10px;
	      text-align: center;
	      color: #fff;
	      background-color: gray;
	      letter-spacing: 0.2em;
	      cursor: pointer;
	  }
	  .el-aside {
		  background-color: #333;
		  display: flex;
		  flex-direction: column;
		}
	  .el-main {
	    background-color: #E9EEF3;
	  }
</style>
